<%-- 
    Document   : addGeographicalZone
    Created on : 15 Nov, 2012, 11:23:40 AM
    Author     : sagar
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@include file="../common/script.jsp" %>


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <%@include file="../common/title.jsp" %>
        
<script type="text/javaScript">
    
    function addOption(selectbox,text,value) {
        var optn = document.createElement("OPTION");
        optn.text = text;
        optn.value = value;
        selectbox.options.add(optn);
    }
    
    function moveRight(){
        // alert("moveRight");
        var rightBox=document.form1.final_tiers;
        var leftBox=document.form1.left_out;
        var moved=0;
        for (var i=0; i<leftBox.length+moved; i++) {
            if (leftBox.options[i-moved].selected == true) {
                addOption(rightBox,leftBox.options[i-moved].text,leftBox.options[i-moved].value);
                leftBox.remove(i-moved);
                moved++;
            }
        }
    }
    function moveLeft(){
        //alert("moveLeft");
        var rightBox=document.form1.final_tiers;
        var leftBox=document.form1.left_out;
        var moved=0;
        for (var i=0; i<rightBox.length+moved; i++) {
            if (rightBox.options[i-moved].selected == true) {
                addOption(leftBox,rightBox.options[i-moved].text,rightBox.options[i-moved].value);
                rightBox.remove(i-moved);
                moved++;
            }
        }
    }
    
    function validateForm()
    {
        var rightBox=document.form1.final_tiers;
        var viewTiers="";
        document.form1.selectedMasterZoneIds.value="";
        for (var i=0; i<rightBox.length; i++) {
            viewTiers += rightBox.options[i].value + ",";
        }
        viewTiers = viewTiers.substr(0, (viewTiers.length-1));
        document.form1.selectedMasterZoneIds.value=viewTiers;
        
        return true;
    }
            
            
            
    var rules=new Array();
    rules[0]='city.cityId|required|please select city'; 
    rules[1]='geographicalZoneName|required|please enter Geographical Zone Name'; 
        
</script>
    </head>
    <body onLoad="yav.init('form1',rules,'inline');">
        <%@include file="../common/header.jsp" %>
        <%@include file="../common/menu.jsp" %>
        <div class="in_02" >
            <%@include file="../common/message.jsp" %>
            <form:form id="form1" name="form1" modelAttribute="geoZone" method="POST">
                <fieldset>
                    <legend>Add Geographical Zone</legend>
                    <table class="formTable">
                        <tr>
                            <td>City:<br/><form:select path="city.cityId" name="city.cityId" id="city.cityId" style="margin-bottom: 5px">
                                    <form:option value="" label="-"></form:option>
                                    <form:options itemLabel="cityName" itemValue="cityId" items="${cityList}"></form:options>
                                </form:select>
                                <br/><span id="errorsDiv_city.cityId"></span></td>
                            <td colspan="2"><spring:message code="geoZoneName"/>:<br/>
                                <form:input path="geographicalZoneName" id="geographicalZoneName" class="userInputLarge" style="width:230px"/>
                                <br><span id="errorsDiv_geographicalZoneName"></span>
                            </td>
                        </tr>
                        <tr>
                            <td> <select name="left_out" class="user-input" id="left_out" multiple size="10" style="width: 100px"></select></td>
                            <td align="center" valign="center" class="script">
                                <br/><br/><br/>
                                <input  onMouseOut="changeout(this)" onMouseOver="changeover(this)" type="button" value="<<" onClick="moveLeft();" name="leftButton"/>
                                <br/><br/><br/>
                                <input onMouseOut="changeout(this)" onMouseOver="changeover(this)" type="button" value=">>" onClick="moveRight();" name="rightButton"/></td>
                            <td><select name="final_tiers" id="final_tiers" class="user-input" multiple size="10" style="width: 100px"></select></td>
                        </tr>

                        <tr>
                            <td><input type="button" name="Cancel" value="Cancel"  onclick="location.href='../geographicalzone/listGeographicalZone.htm'"></td>                       
                            <td>&nbsp;</td>
                            <td><input type="submit" name="btnSubmit" class="userInputFormSubmit" value="<spring:message code="button.Add"/>" onclick="validateForm();"/></td>
                        </tr>
                    </table>
                    <input type="hidden" id="selectedMasterZoneIds" name="selectedMasterZoneIds"/>
                    <script laguage="javascript">
                        var rightBox=document.form1.final_tiers;
                        var leftBox=document.form1.left_out;
                            <c:forEach items="${masterZoneList}" var="parameter">
                            addOption(leftBox,'${parameter.masterZoneCode}','${parameter.masterZoneId}');
                        </c:forEach>
                            <c:forEach items="${selectedMasterZoneList}" var="parameter">
                            addOption(rightBox,'${parameter.masterZoneCode}','${parameter.masterZoneId}');
                        </c:forEach>

                    </script>

                    <spring:hasBindErrors name="masterZone">
                        <div class="error">
                            <form:errors path="*"/>
                        </div>
                    </spring:hasBindErrors>
                </fieldset>
            </form:form>
        </div>
    </body>
</html>